<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png" />
	<link rel="icon" type="image/png" href="assets/img/favicon.png" />
	<title>用户注册</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

	<!-- CSS Files -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/css/paper-bootstrap-wizard.css" rel="stylesheet" />

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="assets/css/demo.css" rel="stylesheet" />

	<!-- Fonts and Icons -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
	<link href="assets/css/themify-icons.css" rel="stylesheet">
</head>

<body>
	<div class="image-container set-full-height" style="background-image: url('assets/img/paper-1.jpeg')">
	    <!--   Creative Tim Branding   -->
	    <a href="#">
	         <div class="logo-container">
	            <div class="logo">
	                <img src="assets/img/new_logo.png">
	            </div>
	            <div class="brand">
	                Creative Tim
	            </div>
	        </div>
	    </a>

		<!--  Made With Paper Kit  -->
		<a href="#/paper-kit?ref=paper-bootstrap-wizard" class="made-with-pk">
			<div class="brand">PK</div>
			<div class="made-with">Made with <strong>Paper Kit</strong></div>
		</a>

	    <!--   Big container   -->
	    <div class="container">
	        <div class="row">
		        <div class="col-sm-8 col-sm-offset-2">

		            <!--      Wizard container        -->
		            <div class="wizard-container">

		                <div class="card wizard-card" data-color="orange" id="wizardProfile">
		                    <form action="#" method="post">
		                <!--        You can switch " data-color="orange" "  with one of the next bright colors: "blue", "green", "orange", "red", "azure"          -->

		                    	<div class="wizard-header text-center">
		                        	<h3 class="wizard-title">Create your profile</h3>
									<p class="category">填写您的个人资料</p>
		                    	</div>

								<div class="wizard-navigation">
									<div class="progress-with-circle">
									     <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="3" style="width: 21%;"></div>
									</div>
									<ul>
			                            <li>
											<a href="#about" data-toggle="tab">
												<div class="icon-circle">
													<i class="ti-user"></i>
												</div>
												Basic
											</a>
										</li>
			                            <li>
											<a href="#address" data-toggle="tab">
												<div class="icon-circle">
													<i class="ti-map"></i>
												</div>
												Verification
											</a>
										</li>
			                        </ul>
								</div>
		                        <div class="tab-content">
		                            <div class="tab-pane" id="about">
		                            	<div class="row">
											<h5 class="info-text"> 请填写注册的基础信息</h5>
											<div class="col-sm-4 col-sm-offset-1">
												<div class="picture-container">
													<div class="picture">
														<img src="assets/img/default-avatar.jpg" class="picture-src" id="wizardPicturePreview" title="" />
														<input type="file" id="wizard-picture">
													</div>
													<h6>添加您的头像</h6>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="form-group">
													<label> 昵称 <small>(required)</small><a style="color: red">*</a></label>
													<input name="firstname" type="text" class="form-control" placeholder="Nickname...">
												</div>
												<div class="form-group">
													<label> 电话号码 <small>(required)</small><a style="color: red">*</a></label>
													<input name="" type="tel" class="form-control" placeholder="11-digit Phone Number..." minlength="11" maxlength="11">
												</div>
											</div>
											<div class="col-sm-10 col-sm-offset-1">
												<div class="form-group">
													<label>Email <small>(required)</small><a style="color: red">*</a></label>
													<input name="email" type="email" class="form-control" placeholder="andrew@creative-tim.com">
												</div>
											</div>
										</div>
		                            </div>
		                            <div class="tab-pane" id="address">
		                                <div class="row">
		                                    <div class="col-sm-12">
		                                        <h5 class="info-text"> 学生身份验证 </h5>
		                                    </div>
											<div class="col-sm-3  col-sm-offset-1">
												<div class="form-group">
													<label>真实姓名<a style="color: red">*</a></label>
													<input type="text" class="form-control" placeholder="真实有效的姓名">
												</div>
											</div>
		                                    <div class="col-sm-7">
		                                    	<div class="form-group">
		                                            <label>学号<a style="color: red">*</a></label>
		                                            <input type="text" class="form-control" placeholder="请输入学号...">
		                                        </div>
		                                    </div>

		                                    <div class="col-sm-3 col-sm-offset-1">
		                                        <div class="form-group">
		                                            <label>学校</label>
		                                            <input type="text" class="form-control" placeholder="青岛大学">
		                                        </div>
		                                    </div>
		                                    <div class="col-sm-3 ">
		                                        <div class="form-group">
		                                            <label>验证码</label><br>
													<input type="text" class="form-control" placeholder="请输入验证码">
		                                        </div>
		                                    </div>
											<div class="col-sm-2">
												<div class="form-group">
													<label>&nbsp;</label><br>
													<input type="button" name="button2" onclick='start_time()' class="alert-warning" style="height: 38px;font-weight: bold;color: red" value="&nbsp; 发送验证码 &nbsp;">
													<span id='oTime'></span>
												</div>
											</div>
		                                </div>
		                            </div>
		                        </div>
		                        <div class="wizard-footer">
		                            <div class="pull-right">
		                                <input type='button' class='btn btn-next btn-fill btn-warning btn-wd' name='next' value='Next' />
		                                <input type='button' class='btn btn-finish btn-fill btn-warning btn-wd' name='finish' value='Finish' />
		                            </div>

		                            <div class="pull-left">
		                                <input type='button' class='btn btn-previous btn-default btn-wd' name='previous' value='Previous' />
		                            </div>
		                            <div class="clearfix"></div>
		                        </div>
		                    </form>
		                </div>
		            </div> <!-- wizard container -->
		        </div>
	    	</div><!-- end row -->
		</div> <!--  big container -->

		<!-- 验证码倒计时 -->
		<script language='javascript'>
			var _t;
			var _h = 0;
			var _m = 1;
			var _s = 0;
			var _v = formatTime(_h + ':' + _m + ':' + _s);
			function doTime()
			{
				_s --;
				if (_s == -1)
				{
					_m --;
					_s = 59;
				}
				if (_m == -1)
				{
					_h --;
					_m = 59;
				}
				var _b = ((_h == 0) && (_m == 0) && (_s == 0));
				if (_b)
				{
					_v = '未收到验证码？重新请求';
					clearTimeout(_t);
				}
				else
				{
					_v = formatTime(_h + ':' + _m + ':' + _s);
					_t = setTimeout('doTime()', 1000);
				}
				document.all.oTime.innerHTML = _v;
			}

			function formatTime(_time)
			{
				return _time.replace(/\b(\w)\b/g, '0$1');
			}
			function start_time()
			{
				document.all.oTime.innerHTML = _v;
				_t = setTimeout('doTime()', 1000);
			}

		</script>

		<div class="footer">
	        <div class="container text-center">
	            Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
	        </div>
	    </div>
	</div>

</body>

	<!--   Core JS Files   -->
	<script src="assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
	<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>

	<!--  Plugin for the Wizard -->
	<script src="assets/js/paper-bootstrap-wizard.js" type="text/javascript"></script>

	<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
	<script src="assets/js/jquery.validate.min.js" type="text/javascript"></script>

</html>
